<template>
  <!-- Header 组件 -->
  <Header></Header>
  <!-- 面包屑导航 -->
  <Crumb>订单页</Crumb>
  <!-- 主要内容 -->
  <div>
    <el-row style="border-bottom: 2px solid #ccc;">
      <el-col class="col">
        <router-link :to="{path:'/order/orderlist',query:{status:0}}" @click="data.currentIndex=0" :class="{active:data.currentIndex==0}">所有订单</router-link>
        <el-divider direction="vertical" />
        <router-link :to="{path:'/order/orderlist',query:{status:1}}" @click="data.currentIndex=1" :class="{active:data.currentIndex==1}">待付款</router-link>
        <el-divider direction="vertical" />
        <router-link :to="{path:'/order/orderlist',query:{status:2}}" @click="data.currentIndex=2" :class="{active:data.currentIndex==2}">待发货</router-link>
        <el-divider direction="vertical" />
        <router-link :to="{path:'/order/orderlist',query:{status:3}}" @click="data.currentIndex=3" :class="{active:data.currentIndex==3}">待收货</router-link>
        <el-divider direction="vertical" />
        <router-link :to="{path:'/order/orderlist',query:{status:4}}" @click="data.currentIndex=4" :class="{active:data.currentIndex==4}">待评价</router-link>
        <el-divider direction="vertical" />
      </el-col>
    </el-row>
    <div class="mt-2 center">
      <router-view></router-view>
    </div>
  </div>
  <!-- Footer 组件 -->
  <Footer></Footer>
</template>

<script setup>
import Header from "@/components/Header.vue"   //@是./src目录的别名，在vite.config.js配置
import Footer from "@/components/Footer.vue"
import Crumb from "@/components/Crumb.vue"
import { reactive,computed,getCurrentInstance,onMounted,onBeforeUpdate,toRefs,onUpdated} from 'vue'
import { useRoute,useRouter } from "vue-router"
const { proxy } = getCurrentInstance()  //获取当前实例的代理对象proxy
const route = useRoute()
const router = useRouter()
const data = reactive({
  currentIndex:0
})
</script>

<style scoped>
.col>a{
  display: inline-block;
  padding: 1% 2%;
  font-weight: bold;
  color:#222;
}
.col>a.active{
  color: red ;
  border-bottom: 2px solid red;
  position: relative;
  top:1px;
}
</style>